<template>
  <div class="data-statistics original-data h-flex">
    <div class="tree-box">
      <el-select v-model="deptmodel" class="deptstyle" clearable placeholder="请选择">
        <el-option
          v-for="item in deptlist"
          :key="item.value"
          :label="item.deptName"
          :value="item.deptName" />
      </el-select>
      <div class="lineTree" style="height: calc(100% - 24px)">
        <el-tree
          ref="tree"
          highlight-current
          show-checkbox
          node-key="label"
          :default-expanded-keys="[defnode]"
          :data="treedata"
          @check="handleNodeClick" />
      </div>

    </div>
    <div class="h-flex-elastic v-flex overflow-hidden app-container__right" style="margin-left:6px;">
      <p class="title">
        <span>4C原始数据共{{ alldata.originalCount }}份&nbsp;&nbsp;最新上传日期{{ alldata.originalTime }}</span>
        <i v-if="isshowrefresh" class="el-icon-close refreshIcon" @click="$router.go(-1)" />
      </p>
      <div slot="valueform" class="content" style="height: calc(100% - 38px)">
        <el-table
          v-loading="loading"
          :data="listData"
          height="100%"
          border
          stripe>
          <el-table-column label="序号" align="center" type="index" width="70" />
          <el-table-column prop="year" align="center" show-overflow-tooltip label="年份" />
          <el-table-column v-for="i in 12" :key="i" align="center" :prop="`${i}`" show-overflow-tooltip :label="i+'月'">
            <template slot-scope="scope">
              <router-link
                v-if="scope.row[`${i}`]"
                :to="{ path: '/cms/cms/detect-data/detect-A4c', query: { dept:deptmodel,line: lineArr,date:`${scope.row.year}-${i}`}}">
                <el-link :underline="false" style="text-decoration:underline;">{{ scope.row[`${i}`] }}</el-link>
              </router-link>
              <span v-else>0</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { originalTree, find4OriginalDate } from '@/api/cms/detect-data'
import { getListSection } from '@/api/cms/detect-data/basic'
export default {
  name: 'Original1C',
  components: {
  },
  data() {
    return {
      isshowrefresh: false,
      lineArr: [],
      defnode: '',
      linecheck: null,
      deptmodel: '全部',
      // 要传得参数
      params: {
        deptName: '全部',
        deptId: '',
        lineCode: ''
      },
      deptlist: [], // 段列表
      // 列表返回得数据存储
      alldata: {
        originalCount: 0,
        originalTime: ''
      },
      // 线路数据
      treedata: [],
      listData: [],
      loading: false
    }
  },
  watch: {
    deptmodel() {
      this.params.lineCode = ''
      this.$refs.tree.setCheckedKeys([])
      this.getListTree()
      this.getList()
    }
  },
  mounted() {
    this.linecheck = this.$route.query.line
    this.lineArr = [this.$route.query.lineCode]
    this.loading = true
    getListSection().then(res => {
      this.loading = false
      this.deptlist = res.data
      const obj = { deptName: '全部' }
      this.deptlist.unshift(obj)
      this.params.deptName = '全部'
    })
    this.getListTree()
    if (!this.linecheck) {
      this.getList()
    }
  },
  methods: {
    handleNodeClick(data, data1, data2) {
      this.params.lineCode = ''
      this.lineArr = []
      if (data1.checkedNodes.length > 0) {
        for (const item of data1.checkedNodes) {
          if (item.lineCode) {
            this.lineArr.push(item.lineCode)
            this.params.lineCode = this.params.lineCode + item.lineCode + ','
          }
        }
        this.params.lineCode = this.params.lineCode.substring(0, this.params.lineCode.length - 1)
      } else {
        this.params.lineCode = ''
      }
      this.getList()
    },
    setCheckedNodes() {
      if (this.linecheck) {
        this.isshowrefresh = true
        this.$refs.tree.setCheckedKeys([this.linecheck])
        this.$nextTick(_ => {
          var key = this.$refs.tree.getCheckedNodes()
          var node = this.$refs.tree.getCheckedNodes(false, true)
          this.defnode = node[0].label
          this.params.lineCode = key[0].lineCode
          this.getList()
          this.linecheck = null
        })
      }
    },
    getListTree() {
      if (this.deptmodel && this.deptmodel !== '全部') {
        for (const item of this.deptlist) {
          if (this.deptmodel === item.deptName) {
            this.params.deptId = item.id
          }
        }
      } else {
        this.params.deptId = ''
      }
      this.loading = true
      originalTree(this.params).then(res => {
        this.loading = false
        this.treedata = res.data
        this.setCheckedNodes()
      })
    },
    getList() {
      this.loading = true
      this.listData = []
      this.params.deptName = this.deptmodel
      find4OriginalDate(this.params).then(res => {
        this.defnode = ''
        this.loading = false
        this.alldata = res.data
        var list = res.data.date
        var keyList = Object.keys(list)
        for (const item of keyList) {
          const obj = { year: item }
          for (const val of list[item]) {
            obj[val.month] = val.count
          }
          this.listData.push(obj)
        }
      }).catch(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .el-input__suffix{
    right: 0;
    background: #e5eef7;
    .el-input__icon {
      color: black;
    }
  }
  ::v-deep .el-input__inner{
    border: 0;
    border-radius: 0;
    height: 40px;
    line-height: 40px;
  }

  ::v-deep .el-tree-node__content{
    padding: 0 10px;
    height: 40px;
    background: white;
  }
::v-deep .el-tree-node__content{
    padding: 0 10px;
    height: 40px;
    background: white;
  }
  //解决表格缩小后表头错位
  ::v-deep .el-table th.gutter{
      display: table-cell!important;
  }
</style>
